<template>
	<view class="content">
		<u-dropdown class="u-dropdown" style="width: 100vw;">
			<u-dropdown-item @change="handleChange" :title="title" v-model="value"  :options="option"></u-dropdown-item>
		</u-dropdown>
		<block v-if="couponList.length>0">
		<view v-for="(item,index) in couponList" class="item-div" :key="item.id">
			<image @click="lookDetail(item)" class="bg-img" v-if="index%3==0" src="../../static/shop/coupon/red_bg.png"></image>
			<image @click="lookDetail(item)" class="bg-img" v-if="index%3==1" src="../../static/shop/coupon/green_bg.png"></image>
			<image @click="lookDetail(item)" class="bg-img" v-if="index%3==2" src="../../static/shop/coupon/blue_bg.png"></image>
			<view class="item-discount" @click="lookDetail(item)">¥{{ item.discount }}</view>
			<view class="item-title" @click="lookDetail(item)">可用产品：{{ item.wares.name }}</view>
			<view class="item-validity" @click="lookDetail(item)">有效期：{{ item.validity }}天</view>
			<view class="btn-div" :style="index%3==0? 'color:red;' : `${index%3==1? 'color:green;' : 'color:blue;'}`">
				<view class="btn-row" @click="lookDetail(item)">查看详情<image :src="index%3==0? '../../static/shop/coupon/red_detail.png' : `${index%3==1? '../../static/shop/coupon/green_detail.png' : '../../static/shop/coupon/blue_detail.png'}`" class="icon-item"></image></view>
				<view class="btn-row" @click="handleShare(item)">立即分享<image :src="index%3==0? '../../static/shop/coupon/red_share.png' : `${index%3==1? '../../static/shop/coupon/green_share.png' : '../../static/shop/coupon/blue_share.png'}`" style="width: 35rpx;height: 35rpx;"></image></view>
			</view>
		</view>
		</block>
		<div v-else class="emptyDataOfCoupon">
		  <image class="emptyDataOfCouponImg" src="../../static/shop/coupon_empty.png" />
		  <div class="emptyDataOfCouponTip">暂无更多数据</div>
		</div>
		
		<view v-show="sharePopup"
		      style="position: fixed;z-index: 888;height: 100vh;width: 100vw;background-color: rgba(0,0,0,.7);"
			  @click="sharePopup = false">
		 </view>
		
		 <view v-show="sharePopup" style="padding-right: 50px; height: 331px; z-index: 889; position: fixed;top: 0px;">
				<view class="up_hint">点击此处分享给朋友。</view>
				<image style="width: 277px;height: 331px;" src="@/static/shop/coupon/share_popup_bg.png"></image>
		        <view class="header">
		          <view style=" font-weight:bold;font-size: 40rpx; display:flex;flex-direction: row;justify-content: center;align-items: flex-end;"><view style="font-size: 28rpx;">¥</view>{{ item. discount }}</view>
		          <view style="font-weight: bold;font-size: 35rpx;">优惠券</view>
		        </view>
		        <view class="middle">
		          <view style="font-size: 28rpx;font-weight: 500;color: #666666;">适用产品</view>
		          <view style="margin: 30rpx 0rpx;font-size: 32rpx;font-weight: 600;color: #333333;">{{item.wares.name }}</view>
		          <view style="font-size: 24rpx;font-weight: 400;color: #999999;">有效期：{{item. validity }}天</view>
		        </view>
		</view>
		<image style="width: 58rpx;height: 58rpx;z-index: 889;position: fixed;top: 350px;padding-right: 19vw;"
		        @click="sharePopup = false"
		        class="light_up_del" v-show="sharePopup"
		        src="@/static/shop/light_up_del.png"/>
		 
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	export default {
		data() {
			return {
				option:[],
				value:" ",
				couponList:[],
				item:{},
				userId:0,
				sharePopup:false,
				title:"所有产品",
			}
		},
		onLoad(i) {
			this.userId=i.userid
			this.getList();
		},
		onShareAppMessage(res) {
				return {
				  title: this.item.discount + "元优惠券",
				  path: `/pages/promotionDetail/promotionDetail?couponId=${this.item.id}&userId=${this.userId}`,
				  imageUrl:"https://gszh.qingjk.com/hy_media/hy_resource/upload/image/sczkq.png"
			}
		 },
		methods: {
			lookDetail(item){
				uni.navigateTo({
					url:`../promotionDetail/promotionDetail?couponId=${item.id}`
				})
			},
			handleShare(item){
				this.item=item,
				this.sharePopup=true
			},
			handleChange(e){
				this.value=e;
				this.option.forEach((item)=>{
					if(item.value===e){
						this.title=item.label
					}
				});
				let obj={nowPage:1,pageSize:69666,condition:{oredCriteria:[[{property:"waresId",value:this.value}]]}}
				api.SM_USER_COUPON_LIST_FOR_SHARE(JSON.stringify(obj)).then((res)=>{
						this.couponList=res.data.body.exhibitDatas		   
				})
			},
		  async	getNav(){
			 	api.SM_USER_COUPON_WARES_LIST_FOR_SHARE().then((res)=>{
					res.data.body.forEach((item)=>{
						item.label=item.name;
						item.value=item.id;
					});
					res.data.body.unshift({label:"所有产品",value:" "});
					this.option=res.data.body;
				});
			},
		 async	getList(){
			 await this.getNav();
				let obj={nowPage:1,pageSize:69666,condition:{oredCriteria:[[{property:"waresId",value:this.value}]]}}
				api.SM_USER_COUPON_LIST_FOR_SHARE(JSON.stringify(obj)).then((res)=>{
						this.couponList=res.data.body.exhibitDatas		   
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-dropdown{
		flex: 0;
	}
	.middle{
		width: 250px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0rpx;
		bottom: 70rpx;
	}
	.header{
		width: 250px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		position: absolute;
		left: 0rpx;
		top: 100px;
	}
	 .up_hint{
		 width: 100px;
		 color: #fff;
		 position: absolute;
		 top: 10px;
		 right: 80px;
		 font-weight: bold;
		 font-size: 36rpx;
	 }
	.item-discount{
		    font-size: 24px;
		    font-family: PingFangSC-Semibold, PingFang SC;
		    font-weight: 600;
		    color: #ffffff;
			width: 31vw;
			height: 200rpx;
			line-height: 200rpx;
			padding-bottom: 60rpx;
			text-align: center;
			position: absolute;
			left: 0rpx;
			top: 0rpx;
	}
	.icon-item{
		width: 30rpx;
		height: 30rpx;
		margin-left: 8rpx;
	}
	.btn-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20rpx;
	}
	.btn-div{
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		left: 33vw;
		bottom: 60rpx;
	}
	.item-validity{
		    font-size: 12px;
		    font-weight: 400;
		    color: #666666;
			position: absolute;
			left: 33vw;
			top: 70rpx;
	}
	.item-title{
		    width: 210px;
		    font-size: 14px;
		    font-weight: bolder;
		    color: #333333;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    position: absolute;
			top: 20rpx;
			left: 33vw;
	}
	.bg-img{
		width: 100%;
		height: 100%;
	}
	.item-div{
		width: 710rpx;
		height: 224rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		position: relative;
	}
   .content {
   	width: 100vw;
   	min-height: 100vh;
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   	background: rgb(245,247,249);
   }
   /* empty data */
   .emptyDataOfCoupon {
     display: flex;
     justify-content: center;
     flex-direction: column;
     width: 100%;
     height: 330px;
   }
   .emptyDataOfCouponImg {
     width: 238px;
     height: 120px;
     margin-left: 50%;
     transform: translateX(-50%);
   }
   
   .emptyDataOfCouponTip {
     margin-top: 10px;
     width: 100%;
     text-align: center;
     margin-left: 50%;
     color: #969799;
     transform: translateX(-50%);
     font-size: 14px;
   }
</style>
